<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="1" data-page-identification="x_hb0xe6o0k2">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
            <div class="body">
                <div class="tab-div">
                    <a-tabs v-model:activeKey="state.outRadio" @change="getData">
                        <a-tab-pane key="平台项目目标进度表" tab="平台项目目标进度表" />
                        <a-tab-pane key="里程碑进度表" tab="交付-模板项目里程碑进度表" />
                        <a-tab-pane key="年度目标表" tab="交付-模板项目年度目标表" force-render />
                    </a-tabs>
                </div>
                <div class="inner-div" v-if="state.outRadio === '里程碑进度表'">
                    <a-tabs v-model:activeKey="topActiveKey">
                        <a-tab-pane v-for="tab in tabList" :key="tab.key" :tab="tab.label" />
                    </a-tabs>
                    <div style="height: 100%">
                        <component
                            :is="componentMap[topActiveKey]"
                            v-if="componentMap[topActiveKey]"
                            :tabName="currentTab.key"
                        />
                        <div v-else style="background-color: #fff; height: 100vh; padding: 24px; position: relative">
                            <a-empty
                                style="position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%)"
                            />
                        </div>
                    </div>
                </div>
                <div class="inner-div outer" v-if="state.outRadio === '年度目标表'">
                    <a-tabs v-model:activeKey="state.innerYearRadio">
                        <a-tab-pane key="时间轴" tab="时间轴" />
                    </a-tabs>
                    <div style="overflow-y: auto; height: calc(100vh - 300px)">
                        <!--                        <a-col :span="10" :offset="7">-->
                        <a-form :model="state.yearTimeList" ref="yearBatchForm">
                            <div
                                class="module-item"
                                style="width: 60%"
                                v-for="(item, index) in state.yearTimeList"
                                :key="index"
                            >
                                <div class="form-content">
                                    <a-row>
                                        <a-col :span="12">
                                            <a-form-item
                                                label="标题"
                                                :rules="[{ required: true, message: '请输入标题！', trigger: 'blur' }]"
                                                :name="[index, 'name']"
                                            >
                                                <a-input
                                                    style="width: 100%"
                                                    v-model:value="state.yearTimeList[index].name"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="12">
                                            <a-form-item
                                                :labelCol="{ span: 6 }"
                                                :wrapperCol="{ span: 18 }"
                                                label="对应时间"
                                                :rules="[
                                                    { required: true, message: '请选择对应时间！', trigger: 'blur' }
                                                ]"
                                                :name="[index, 'date']"
                                            >
                                                <a-date-picker
                                                    style="width: 100%"
                                                    value-format="YYYY-MM-DD"
                                                    v-model:value="state.yearTimeList[index].date"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                </div>

                                <a class="del" @click="handlerDeleteFormItem4(index)">删除</a>
                                <a class="add-btn" @click="handlerAddFormItem4(index, '下方')">下方插入</a>
                            </div>
                        </a-form>
                        <!--                        </a-col>-->
                        <a-space>
                            <a-button type="primary" ghost @click="handlerAddFormItem4(index, '最后')"
                                ><template #icon><plus-outlined /></template>新增</a-button
                            >
                            <a-button type="primary" @click="submit">保存</a-button>
                        </a-space>
                    </div>
                </div>
                <div class="inner-div outer" v-if="state.outRadio === '平台项目目标进度表'">
                    <a-tabs v-model:activeKey="state.innerptMilpostRadio">
                        <a-tab-pane key="展示项目" tab="展示项目" />
                    </a-tabs>
                    <div style="overflow-y: auto; height: calc(100vh - 300px)">
                        <!--                        <a-col :span="10" :offset="7">-->
                        <a-form :model="state.showProjectList" ref="showProjectRef">
                            <div class="module-item" v-for="(item, index) in state.showProjectList" :key="index">
                                <div class="form-content">
                                    <a-row>
                                        <a-col :span="8">
                                            <a-form-item
                                                label="项目名称"
                                                :rules="[
                                                    { required: true, message: '请选择项目名称！', trigger: 'blur' }
                                                ]"
                                                :name="[index, 'projectId']"
                                            >
                                                <a-select
                                                    show-search
                                                    v-model:value="state.showProjectList[index].projectId"
                                                    :options="state.selectProjectList"
                                                    allow-clear
                                                    placeholder="请选择"
                                                    @focus="getProjectList"
                                                    :field-names="{ label: 'projectName', value: 'projectId' }"
                                                    :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.projectName
                                                                    .toLowerCase()
                                                                    .indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-item
                                                :labelCol="{ span: 6 }"
                                                :wrapperCol="{ span: 18 }"
                                                label="排序"
                                                :rules="[
                                                    { required: true, message: '请输入序号', trigger: 'blur' },
                                                    {
                                                        pattern: new RegExp(/^(0(\.\d{1,2})?|[1-9]\d*(\.\d{1,2})?)$/),
                                                        message: '仅支持小数点后两位的正数',
                                                        trigger: 'blur'
                                                    }
                                                ]"
                                                :name="[index, 'projectSort']"
                                            >
                                                <a-input-number
                                                    style="width: 100%"
                                                    v-model:value="state.showProjectList[index].projectSort"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-item
                                                :labelCol="{ span: 6 }"
                                                :wrapperCol="{ span: 18 }"
                                                label="显示视图"
                                                :rules="[{ required: true, message: '选择显示视图', trigger: 'blur' }]"
                                                :name="[index, 'displayView']"
                                            >
                                                <a-select
                                                    placeholder="请选择"
                                                    :options="[
                                                        {
                                                            label: '任务视图',
                                                            value: '任务视图'
                                                        },
                                                        {
                                                            label: '故事视图',
                                                            value: '故事视图'
                                                        }
                                                    ]"
                                                    v-model:value="state.showProjectList[index].displayView"
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                </div>

                                <a class="del" @click="handlerDeleteFormItem5(index)">删除</a>
                                <a class="add-btn" @click="handlerAddFormItem5(index, '下方')">下方插入</a>
                            </div>
                        </a-form>
                        <!--                        </a-col>-->
                        <a-space>
                            <a-button type="primary" ghost @click="handlerAddFormItem5(index, '最后')"
                                ><template #icon><plus-outlined /></template>新增</a-button
                            >
                            <a-button type="primary" @click="submit">保存</a-button>
                        </a-space>
                    </div>
                </div>
            </div>
            <!-- end vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    // 动态tab
    const tabList = ref([])
    const topActiveKey = ref() // 默认第一个
    const currentTab = computed(() => tabList.value.find(tab => tab.key === topActiveKey.value))

    function getTabList() {
        get('/solution-ppm-basic-data/api/v1/product_line/all').then(data => {
            tabList.value = data.data.map(item => {
                return {
                    label: item.productLineName,
                    key: item.productLineCode
                }
            })
            if (tabList.value.length > 0) {
                topActiveKey.value = tabList.value[0].key
            }
        })
    }
    //     动态配置里程碑
    import CementSetting from './Page3000001137.vue'
    import EndToEndSetting from './Page3000001138.vue'
    import AdministerSetting from './Page3000001139.vue'
    const componentMap = {
        'CEMENT_INGREDIENTS': CementSetting,
        'END_TO_END': EndToEndSetting,
        'EDGE_MEASUREMENT': AdministerSetting
    }
    onMounted(() => {
        getTabList()
        getData()
        getProjectList()
    })

    const state = reactive({
        outRadio: '平台项目目标进度表',
        innerMilpostRadio: '批次',
        endToEndRadio: '里程碑项目阶段周期',
        radioType: '水泥配料',
        innerYearRadio: '时间轴',
        innerptMilpostRadio: '展示项目',
        batchList: [],
        priorityList: [],
        timeAxisList: [],
        projectList: [],
        selectProjectList: [],
        yearTimeList: [],
        showProjectList: [],
        priorityIdList: [],
        batchIdList: [],
        milepostList: [],
        colorDataList: [],
        colorList: [
            { label: '绿色', value: '#00B050' },
            { label: '白色', value: '#FFFFFF' },
            { label: '浅红', value: '#FF99CC' },
            { label: '红色', value: '#FF0000' },
            { label: '深红', value: '#C00000' }
        ]
    })

    function handlerDeleteFormItem4(index) {
        state.yearTimeList.splice(index, 1)
    }
    // 新插一条模块
    function handlerAddFormItem4(index, type) {
        if (type === '最后') {
            state.yearTimeList.push({ ...yearTimeItem })
        } else {
            // 否则使用 splice 方法在 index 后插入
            state.yearTimeList.splice(index + 1, 0, { ...yearTimeItem })
        }
    }
    function handlerDeleteFormItem5(index) {
        state.showProjectList.splice(index, 1)
    }
    // 新插一条模块
    function handlerAddFormItem5(index, type) {
        if (type === '最后') {
            state.showProjectList.push({ ...showProjectItem })
        } else {
            // 否则使用 splice 方法在 index 后插入
            state.showProjectList.splice(index + 1, 0, { ...showProjectItem })
        }
    }
    const yearTimeItem = {
        name: undefined,
        date: undefined
    }
    const showProjectItem = {
        projectId: undefined,
        projectSort: undefined,
        displayView: undefined
    }
    function getData() {
        if (state.outRadio === '平台项目目标进度表') {
            get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/project_display/search').then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                if (data.data.length > 0) {
                    state.showProjectList = data.data
                } else {
                    state.showProjectList = [JSON.parse(JSON.stringify(showProjectItem))]
                }
            })
        } else {
            get(
                `/solution-ppm/api/v2/built-in-system-ppm/dashboard_config/batch_priority_time/${state.outRadio}/${
                    state.outRadio === '里程碑进度表' ? state.innerMilpostRadio : state.innerYearRadio
                }`
            ).then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                if (data.data.length > 0) {
                    state.yearTimeList = data.data
                } else {
                    state.yearTimeList = [JSON.parse(JSON.stringify(yearTimeItem))]
                }
            })
        }
    }
    const yearBatchForm = ref(null)
    const showProjectRef = ref(null)
    function submit() {
        if (state.outRadio === '年度目标表') {
            yearBatchForm.value.validate().then(() => {
                post(
                    `/solution-ppm/api/v2/built-in-system-ppm/dashboard_config/batch_priority_time/${state.outRadio}/${
                        state.outRadio === '里程碑进度表' ? state.innerMilpostRadio : state.innerYearRadio
                    }
                  `,
                    state.yearTimeList
                )
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                    })
                    .finally(() => {
                        getData()
                    })
            })
        } else {
            //   保存展示项目
            showProjectRef.value.validate().then(() => {
                post(`/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/project_display`, state.showProjectList)
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                    })
                    .finally(() => {
                        getData()
                    })
            })
        }
    }
    //     获取项目
    function getProjectList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/project/search').then(data => {
            state.selectProjectList = data.data
        })
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .body {
        background-color: #fff;
        height: 100%;
        padding: 24px;
        padding-top: 0;
    }
    .form-content {
        display: inline-block;
        width: calc(100% - 80px);
    }
    .del {
        width: 28px;
        color: #3875ff;
        position: absolute;
        right: 35px;
        top: 5px;
    }
    .module-item {
        width: 80%;
        position: relative;
    }
    .add-btn {
        position: absolute;
        right: -35px;
        color: #3875ff;
        top: 5px;
    }
    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
    }

    .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 8px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }
    .inner-div :deep(.ant3-tabs-tab) {
        margin-left: 10px;
    }
    .inner-div :deep(.ant3-tabs-tab-btn) {
        text-align: center;
        //width: 68px;
        height: 32px;
        padding: 0 5px;
        line-height: 32px;
    }
    .inner-div :deep(.ant3-tabs-tab-active) {
        //width: 68px;
        height: 32px;
        background: #f0f2f5;
        border-radius: 16px;
        color: #262626;
        line-height: 32px;
        top: 12px;
    }
    .outer :deep(.ant3-tabs-tab-active) {
        //width: 68px;
        height: 32px;
        background: #f0f2f5;
        border-radius: 16px;
        color: #262626;
        line-height: 32px;
    }
    .outer :deep(.ant3-tabs-nav-wrap) {
        height: 56px;
    }
    .inner-div :deep(.ant3-tabs-ink-bar) {
        display: none !important;
    }
    .inner-div :deep(.ant3-tabs-tab.ant3-tabs-tab-active .ant3-tabs-tab-btn) {
        color: #262626;
        font-weight: 700;
        background: #f0f2f5;
        border-radius: 16px;
    }
    .tab-div :deep(.ant3-tabs-nav) {
        margin-bottom: 0;
    }
</style>
